<template>
  <div>
    <h1 @click="$router.push('/layout/readHome')">返回首页</h1>
    <van-address-list
      v-model="chosenAddressId"
      :list="addressList"
      :disabled-list="disabledList"
      disabled-text="以下地址超出配送范围"
      default-tag-text="默认"
      @add="onAdd"
      @edit="onEdit"
    />
  </div>
</template>

<script>
import { Toast } from 'vant'
import { mapState, mapMutations } from 'vuex'
export default {
  data() {
    return {
      chosenAddressId: '1',
      list: [],
      disabledList: [
        {
          id: '3',
          name: '王五',
          tel: '1320000000',
          address: '浙江省杭州市滨江区江南大道 15 号',
        },
      ],
    }
  },

  computed: {
    ...mapState(['addressList', 'chooseId']),
  },
  watch: {
    chosenAddressId(v) {
      this.SET_CHOOSE_ID(v)
    },
  },
  // keep-alive会触发这个生命周期
  activated() {
    console.log('----------', this.addressList)
    this.chosenAddressId = this.chooseId
  },

  methods: {
    ...mapMutations([
      'SET_CHOOSE_ID',
      'SET_ADDRESS_ITEM_FOR_EDIT',
      'updateAddressMsg',
    ]),
    onAdd() {
      // Toast('新增地址')
      this.updateAddressMsg('add')
      this.$router.push('/add-edit-address')
    },
    onEdit(item, index) {
      this.updateAddressMsg('edit')
      console.log('edit-------编辑页面', item)
      // 将每一条要设置的数据，保存在vuex中
      this.SET_ADDRESS_ITEM_FOR_EDIT(item)
      this.$router.push('/add-edit-address')
      // Toast('编辑地址:' + index)
    },
  },
}
</script>

<style></style>
